Skip to main content

Project tech description

We used web components to build our application, so that each element was reusable, we could easily use each of them on each of the subpages.

We used routing to navigate between pages, we have created functions that handle requests with different HTTP methods and directed to different paths in the URL

To create a database of movies and series, we used the free API from https://imdb-api.com/. ApiProvider provides methods for developers that return data from the API. They themselves directly refer to ApiService which in turn:

  1. Calls on the CacheManager to check if the request exists in the cache
  2. If CacheManager returns successfully the data, it is returned from ApiService
  3. If CacheManager cannot find the data in the cache, it makes a request to a real api server with a key and an appropriate query
  4. If the request is successful, supports downloading new files to the cache (to be manually added by the developer)

StorageManager provides two simple methods for manipulating data in localStorage.

Each of the components has its own style written in SCSS. We used mixins and created variables, thanks to which our entire application is graphically consistent and compatible with mobile devices.

Project Setup#

Our program can be started directly by clicking on this link.

To run the project locally follow these steps:

  1. Clone this repository
  2. Open repository in your code editor
  3. Go to IMDb API Website, create an account and get your API Key.
  4. Copy .env.example to .env and setup enviromental variables:
    1. paste your API Key into API_SECRET_KEY env variable
    2. set USE_API env variable:
      1. if equal true - application will call the API if the data was not found in the cache, it will download requests for you to add into cache
      2. if equal false or any other value - application won't ever call the API even if the data was not found in the cache, it will throw an error
  5. Run command npm run start:dev
  6. Enter the local host that was created which by default is http://localhost:8765/

Tech requirements#

To run this project you have to add and enable Prettier

To run this project you have to:

  • Clone this repository

  • Go to IMDb API Website, create an account and get your API Key.

  • Copy .env.example to .env and setup enviromental variables:

    • paste your API Key into API_SECRET_KEY env variable
    • set USE_API env variable:
      • if equal true - application will call the API if the data was not found in the cache, it will download requests for you to add into cache
      • if equal false or any other value - application won't ever call the API even if the data was not found in the cache, it will throw an error

  • Run npm install in root directory

  • Run npm run start:dev to open live server

Other commands

  • npm run build - building the bundled package ready for production
  • npm run format - formatting the code using prettier
  • npm run test - running tests once
  • npm run test:watch - running tests in watch mode
  • npm run test:cov - running tests with information about code coverage with tests

Technologies used#

the program was created using the following technologies:

  • HTML5
  • SCSS
  • JavaScript
  • FetchAPI
  • JEST
  • Parcel builder

Resources#